@media screen and (min-width: 1100px) {

  body:after {
    content: "L";
  }

  .only-m {
    display: none !important;
  }

  .only-l {
    display: block !important;
  }

  .no-l {
    display: none !important;
  }


  /* ------------[ Schriften ]------------ */

  /* ------------[ Body ]------------ */

  body {
    font-size: 18px;
    line-height: 26px;
  }


  /* ==============================[ Begrenzung Inhalt ]============================== */

  .inner {
    padding: 0 60px;
  }


  /* ==============================[ Formate für Sektionen ]============================== */

  section {
    padding: 120px 0;
  }

  /* ------------[ spezielle Klassen für Sektionen ]------------ */

  /* ------------[ Abstände steuern ]------------ */

  /* ========================[ universelle Klassen ]======================== */

  /* ------------[ Positionierung der Elmente ]------------ */

  /* ------------[ verschiedene Abstände ]------------ */

  /* ------------[ verschiedene Abstände im Grid ]------------ */

  /* ------------[ Klassen für Texte ]------------ */

  .bigtext {
    font-size: 24px;
    line-height: 32px;
  }


  /* ========================[ Header-Bereich ]======================== */

  header {
    display: none;
  }

  section.header-section {
    padding: 36px 0;
    margin: 0 auto;
  }

  .header-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }


  /* ------------[ Logo ]------------ */

  a.logo {
    margin: 0;
  }


  /* ========================[ Fixierte Abschnittsnavigation ]======================== */

  ul.section-nav__list > li {
    padding: 0;
    background: none;
  }

  .section-nav {
    display: block;
    position: fixed;
    right: 0;
    top: 33%;
    transform: translateY(-50%);
    border-radius: 30px 0 0 30px;
    padding: 30px 24px;
    z-index: 50;
  }

  .section-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    padding-left: 0;
  }

  /* Jedes Item: Label + Linie + Punkt von links nach rechts */
  .section-nav__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    padding: 3px 0;
    cursor: pointer;
  }

  /* Punkt */
  .section-nav__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(101, 20, 14, 0.22);
    flex-shrink: 0;
    transition: background 0.22s ease, transform 0.22s ease;
  }

  .section-nav__link:hover .section-nav__dot,
  .section-nav__link:focus .section-nav__dot,
  .section-nav__link.active .section-nav__dot {
    background: var(--color-red);
  }

  .section-nav__link.active .section-nav__dot {
    transform: scale(1.6);
  }

  /* Linie: fährt von 0 auf ihre volle Breite auf */
  .section-nav__line {
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-red);
    flex-shrink: 0;
    margin-right: 6px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .section-nav__link:hover .section-nav__line,
  .section-nav__link:focus .section-nav__line,
  .section-nav__link.active .section-nav__line {
    width: 18px;
  }

  /* Label: erscheint leicht verzögert nach der Linie */
  .section-nav__label {
    font-size: 10px;
    line-height: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-red);
    white-space: nowrap;
    padding: 3px;
    margin-right: 6px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.3s ease 0.2s,
                transform 0.3s ease 0.2s;
    pointer-events: none;
  }

  .section-nav__link:hover .section-nav__label,
  .section-nav__link:focus .section-nav__label,
  .section-nav__link.active .section-nav__label {
    opacity: 1;
    transform: translateX(0);
  }


  /* ========================[ Standard-Elemente ]======================== */

  /* ------------[ Überschriften ]------------ */

  h1 {
    font-size: 60px;
    line-height: 68px;
  }

  h2 {
    font-size: 42px;
    line-height: 50px;
  }

  h3 {
    font-size: 24px;
    line-height: 32px;
  }

  h4 {
    font-size: 18px;
    line-height: 26px;
  }


  /* ------------[ Absätze ]------------ */

  /* ------------[ Verlinkungen ]------------ */

  /* ------------[ Bilder ]------------ */

  .rounded-pic-left {
    border-radius: 120px 0 120px 0;
  }

  .rounded-pic-right {
    border-radius: 0 120px 0 120px;
  }

  /* ------------[ Bild größer klicken ]------------ */

  /* ------------[ Text-Bild-Element ]------------ */

  /* ------------[ Unnummerierte Listen ]------------ */

  /* ------------[ Nummerierte Listen ]------------ */

  /* ------------[ Listen mit mehr Abstand ]------------ */

  /* ------------[ Tabellen ]------------ */

  /* ========================[ Sonderelmente ]======================== */

  /* ------------[ Infobox ]------------ */

  /* ------------[ Teaser ]------------ */

  /* ------------[ Akkordeon ]------------ */

  .accordion .title h2,
  .accordion .title h3 {
    font-size: 24px;
    line-height: 32px;
    padding: 18px 36px 18px 0;
  }


  /* ------------[ Videoplayer ]------------ */

  /* ------------[ Formulare ]------------ */

  /* ========================[ Sonderelmente Website ]======================== */

  /* ------------[ Keyvisual ]------------ */

  .keyvisual-image {
    height: 600px;
    padding-top: 0; /* Mobile padding-top zurücksetzen */
    border-radius: 0 120px 0 120px;
    margin: 0 12% 0 0;
  }

  .keyvisual-backdrop {
    bottom: 0; /* inset: 0 vollständig herstellen */
    height: auto;
    border-radius: inherit;
    --kv-radius: 0px 120px 0px 120px;
  }

  .keyvisual-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    grid-gap: 42px;
    position: absolute;
    bottom: 60px;
    left: 60px;
    color: var(--color-white);
    text-align: left;
    margin: 0 -12% 0 0;
    z-index: 2; /* über ::before (bg) und ::after (overlay) */
  }

  .keyvisual-content .keyvisual-text h1 {
    color: var(--color-white);
  }

  .keyvisual-button a {
    display: block;
    width: 360px;
    color: var(--color-white);
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    background-color: var(--color-red);
    border-radius: 60px 0 60px 0;
    padding: 42px 30px;
    transition: all 0.3s ease-in-out;
  }

  /* border-radius-Flip bleibt auf Desktop erhalten, Farb- + Bewegungseffekt kommt aus 1small */
  .keyvisual-button a:hover,
  .keyvisual-button a:focus {
    border-radius: 0 60px 0 60px;
    transition: all 0.3s ease-in-out;
  }


  /* ------------[ Termin-Button ]------------ */

  /* ------------[ Text-Bild-Box ]------------ */

  .text-bild-box {
    max-width: 100%;
  }

  /* Grid-Spalten wiederherstellen — überschreibt den span-12-Override aus 2middle.css */
  .text-bild-box.grid[cols="7-5"] > :nth-child(odd) {
    grid-column: auto / span 7;
  }

  .text-bild-box.grid[cols="7-5"] > :nth-child(even) {
    grid-column: auto / span 5;
  }

  .text-bild-box .text-box {
    border-radius: 0 0 0 120px;
    padding: 90px 60px;
  }

  .text-bild-box .text-image {
    aspect-ratio: unset;
    min-height: 0;
  }

  .text-bild-box .text-image .zoom-img {
    border-radius: 0 120px 0 0;
  }

  .text-bild-box .text-image img {
    border-radius: 0 120px 0 0;
  }

  /* Button zurück zur positionierten Variante */
  .text-bild-box .text-image .button {
    left: auto;
    right: 54px;
    border-radius: 30px 30px 0 0;
    text-align: left;
  }


  /* ------------[ Kontaktdaten ]------------ */

  section.keyvisual-contact {
    padding: 60px 0 120px;
  }

  section.keyvisual-contact .keyvisual-contact-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  section.keyvisual-contact .keyvisual-contact-flex hr {
    width: 2px;
    height: auto;
    align-self: stretch;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  section.keyvisual-contact .keyvisual-contact-flex hr:nth-of-type(2) {
    transition-delay: 0.25s;
  }

  section.keyvisual-contact.inview .keyvisual-contact-flex hr {
    transform: scaleY(1);
  }

  section.keyvisual-contact .keyvisual-contact-flex h2 {
    font-size: 24px;
    line-height: 32px;
  }


  /* ------------[ Stärken ]------------ */

  section.strengthen {
    padding: 240px 0 90px;
    margin: -120px 0 0;
  }

  .strength {
    margin-top: 42px;
  }

  .strength-icon {
    width: auto;
    height: auto;
    padding: 72px;
    margin: 0;
    display: block;
  }


  /* ------------[ Zitat ]------------ */

  section.quote {
    padding: 120px 0 0;
  }

  .quote-picture {
    max-width: 100%;
  }

  .quote-text {
    text-align: left;
    margin: 0 0 120px;
  }


  /* ------------[ Anfahrt ]------------ */

  .maps-link__text {
    font-size: 24px;
  }

  section.directions {
    padding: 240px 0 120px;
    margin: -120px 0 0;
  }

  section.directions h2 {
    text-align: left;
    margin: 0;
  }

  section.directions .grid[cols="6-6"] > * {
    grid-column: auto / span 6;
  }

  .iconlist li {
    flex-direction: row;
    text-align: left;
  }


  #FAQs {
    padding: 220px 0 120px;
  }




  /* ========================[ Bildergalerie-Slider ]======================== */

  .gallery-item {
    width: 420px;
    height: 300px;
  }


  /* ========================[ Leistungen ]======================== */

  #Leistungen h2 {
    text-align: right;
  }

  .leistung {
    flex-direction: row;
  }

  .leistungen-diagram {
    display: grid;
    grid-template-columns: 1fr 240px 1fr;
    align-items: stretch;
    gap: 0;
    padding: 60px 0 0;
  }

  .leistungen-col {
    gap: 42px;
  }


  /* ------------[ Linke Spalte ]------------ */

  .leistungen-col--left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
  }

  .leistungen-col--left .leistung {
    flex-direction: row;
    text-align: right;
    align-items: center;
  }

  .leistungen-col--left .leistung__text {
    flex: 1;
  }

  /* Mittleres Element versetzt: Punkt weiter von Mitte weg */
  .leistungen-col--left .leistung--mid {
    padding-right: 60px;
  }

  /* ------------[ Rechte Spalte ]------------ */

  .leistungen-col--right {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
  }

  .leistungen-col--right .leistung {
    align-items: center;
  }

  .leistungen-col--right .leistung__text {
    flex: 1;
  }

  /* Mittleres Element versetzt */
  .leistungen-col--right .leistung--mid {
    padding-left: 60px;
  }

  /* ------------[ Mitte ]------------ */

  .leistungen-mitte {
    display: flex;
    grid-column: 2;
    order: 0;
    width: auto;
    height: auto;
    position: relative;
    align-items: center;
    justify-content: center;
  }

  /* ------------[ Ringe Animation ]------------ */
  /* Jeder Ring hat eine andere Dauer → nie synchron → amorphischer 3D-Effekt */

  @keyframes leistungen-ring-a {
    0%, 100% { transform: translate(-50%, -50%); }
    25%       { transform: translate(calc(-50% + 9px), calc(-50% - 11px)); }
    60%       { transform: translate(calc(-50% - 7px), calc(-50% + 8px)); }
    80%       { transform: translate(calc(-50% + 5px), calc(-50% + 14px)); }
  }

  @keyframes leistungen-ring-b {
    0%, 100% { transform: translate(-50%, -50%); }
    35%       { transform: translate(calc(-50% - 13px), calc(-50% + 7px)); }
    70%       { transform: translate(calc(-50% + 10px), calc(-50% - 9px)); }
  }

  @keyframes leistungen-ring-c {
    0%, 100% { transform: translate(-50%, -50%); }
    40%       { transform: translate(calc(-50% + 12px), calc(-50% + 9px)); }
    75%       { transform: translate(calc(-50% - 8px), calc(-50% - 12px)); }
  }

  @keyframes leistungen-ring-d {
    0%, 100% { transform: translate(-50%, -50%); }
    20%       { transform: translate(calc(-50% - 10px), calc(-50% - 8px)); }
    55%       { transform: translate(calc(-50% + 8px), calc(-50% + 11px)); }
    85%       { transform: translate(calc(-50% - 6px), calc(-50% + 5px)); }
  }

  /* Dekorative Ringe — versetzt positioniert + individuell animiert */
  .leistungen-mitte-ring1 {
    width: 360px;
    height: 360px;
    position: absolute;
    top: 60%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid rgba(101, 20, 14, 0.35);
    will-change: transform;
    animation: leistungen-ring-a 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  .leistungen-mitte-ring2 {
    width: 360px;
    height: 360px;
    position: absolute;
    top: 50%;
    left: 65%;
    border-radius: 50%;
    border: 2px solid rgba(101, 20, 14, 0.28);
    will-change: transform;
    animation: leistungen-ring-b 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  .leistungen-mitte-ring3 {
    width: 360px;
    height: 360px;
    position: absolute;
    top: 50%;
    left: 35%;
    border-radius: 50%;
    border: 2px solid rgba(101, 20, 14, 0.28);
    will-change: transform;
    animation: leistungen-ring-c 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  .leistungen-mitte-ring4 {
    width: 360px;
    height: 360px;
    position: absolute;
    top: 40%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid rgba(101, 20, 14, 0.22);
    will-change: transform;
    animation: leistungen-ring-d 9.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  /* Barrierefreiheit: Animation deaktivieren wenn vom System gewünscht */
  @media (prefers-reduced-motion: reduce) {
    .leistungen-mitte-ring1,
    .leistungen-mitte-ring2,
    .leistungen-mitte-ring3,
    .leistungen-mitte-ring4 {
      animation: none;
    }
  }

  .leistungen-mitte__kreis {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
  }

  .leistungen-mitte__kreis img {
    width: 120px;
    height: auto;
  }

  .leistungen-col--left .leistung__dot {
    order: 0;
  }


  /* ------------[ Punkt-Größe Desktop ]------------ */

  .leistung__dot {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
  }

  .leistung__dot img {
    height: 36px;
  }


  /* ------------[ 7. Leistung — unten zentriert unter Bildmarke ]------------ */

  /* Sitzt in Grid-Spalte 2 (240px), automatisch in Zeile 2 nach der Bildmarke */
  .leistungen-bottom {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: -30px 0 0;
  }

  /* Auf Desktop: Icon oben, Text darunter, zentriert */
  .leistungen-bottom .leistung {
    min-width: 420px !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  /* Linke-Spalten-Reset greift hier nicht — Dot soll in normaler DOM-Reihenfolge (oben) bleiben */
  .leistungen-bottom .leistung__dot {
    order: 0;
  }

  .leistungen-bottom .leistung__text {
    flex: unset;
  }


  /* ========================[ Team-Collage ]======================== */

  section.team {
    padding: 0;
    position: relative;
    aspect-ratio: 1660 / 840;
    overflow: visible;
  }

  .team-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    aspect-ratio: 1660 / 960;
    padding: 0;
    gap: 0;
    z-index: 1;
  }

  .team-text {
    position: absolute;
    left: 9%;
    top: 12%;
    width: 24%;
    text-align: left;
    margin: 0;
    z-index: 2; /* über den absolut positionierten Kreisen */
  }

  .team-circle {
    position: absolute;
    left: var(--tc-l);
    top: var(--tc-t);
    flex-shrink: unset;
    border: none;
  }

  /* Größen als % der Canvas-Breite → leicht kleiner als ursprüngliches Design */
  .team-circle--l  { width: 16.5%; height: auto; aspect-ratio: 1; }
  .team-circle--m  { width: 13%;   height: auto; aspect-ratio: 1; }
  .team-circle--s  { width: 11%;   height: auto; aspect-ratio: 1; }
  .team-circle--xs { width: 8%;    height: auto; aspect-ratio: 1; }

  /* Schriftgröße je Kreisgröße — vw-basiert damit Font und Kreis immer proportional bleiben */
  .team-circle--l  .team-circle__name { font-size: 1.0vw; }
  .team-circle--l  .team-circle__role { font-size: 0.8vw; }
  .team-circle--l  .team-circle__cta  { font-size: 0.75vw; }
  .team-circle--m  .team-circle__name { font-size: 0.9vw; }
  .team-circle--m  .team-circle__role { font-size: 0.7vw; }
  .team-circle--s  .team-circle__name { font-size: 0.8vw; }
  .team-circle--s  .team-circle__role { font-size: 0.6vw; }
  .team-circle--xs .team-circle__name { font-size: 0.7vw; }
  .team-circle--xs .team-circle__role { font-size: 0.5vw; }


  /* ------------[ Team-Popup ]------------ */

  .team-popup__content {
    padding: 60px;
  }


  /* ========================[ Footer-Bereich ]======================== */

  footer .tab {
    padding: 0;
  }

  footer a {
    padding: 0;
  }


 }