@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-v38-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



@font-face {

  font-family: 'Fraunces';

  src: url('fonts/fraunces-v38-latin-700.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}

.quote-lead{
  max-width:80ch;           /* <- exakt wie lead */
  margin:0 auto;
  padding:22px 22px;
  text-align: center;
  border-radius:22px;
  background:transparent;          /* oder deine Wunschfläche */
  box-shadow: 0 90px 30px rgba(0,0,0,.18);
}


.quote-lead{
  width: min(80ch, calc(100% - 44px)); /* <- wichtig: schafft Platz für Schatten */
  margin-inline: auto;
}

.quote-lead blockquote{
  margin:0;
  font-size:28px;           /* gleiche Größe wie lead */
  line-height:1.45;
  opacity:.95;
   overflow-wrap:anywhere;
  word-break:break-word;
}

.quote-lead figcaption{
  margin-top:14px;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
}

@media (max-width:520px){
  .quote-lead{
    padding:18px 16px;
  }
  .quote-lead blockquote{
    font-size:18px;
    line-height:1.7;
  }
}




h9, h10, h11, hx{
  display: inline-block;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  max-width: 100%;
}







    :root{
      --A:#191656;
      --B:#60747B;

      --max:1120px;
      --pad:22px;
      --paper:#f3f3f1;
--ink:#191656;

   /* neutral für Lesbarkeit (Fade nach unten) */
--paper:#B4A166;  /* helles warmes Grau */
--ink:#191656;    /* dunkler Text auf paper */

      --radius:18px;

      /* derived only from A/B via alpha (allowed) */
      --fg-15: rgba(180,161,102,.15);
      --fg-30: rgba(180,161,102,.30);
      --fg-55: rgba(180,161,102,.55);
      --bg-20: rgba(96,116,123,.20);
      --bg-55: rgba(96,116,123,.55);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Fraunces", serif;
      background:var(--bg);
      color:var(--fg);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Layout */
    .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}
section{padding:130px 0;}
@media (max-width: 700px){
  section{padding:96px 0;}
}    .anchor{scroll-margin-top:50px;}

.theme-ab{ background: var(--B); color: var(--A); }
.theme-ba{ background: var(--A); color: var(--B); }

.theme-ba2{ background:#B4A166 ; color:#191656; }


/* Wichtig: Links/Buttons/Formular etc. sollen immer die Section-Farbe erben */
.theme-ab a, .theme-ab nav a, .theme-ab .btn, .theme-ab input, .theme-ab textarea, .theme-ab summary { color: var(--A); }
.theme-ba a, .theme-ba nav a, .theme-ba .btn, .theme-ba input, .theme-ba textarea, .theme-ba summary { color: var(--B); }

/* Borders ebenfalls passend */
.theme-ab .panel, .theme-ab nav a, .theme-ab .btn, .theme-ab input, .theme-ab textarea, .theme-ab details { border-color: var(--A); }
.theme-ba .panel, .theme-ba nav a, .theme-ba .btn, .theme-ba input, .theme-ba textarea, .theme-ba details { border-color: var(--B); }

   


.theme-paper{ background: var(--paper); color: var(--ink); }
.theme-paper a,
.theme-paper nav a,
.theme-paper .btn,
.theme-paper input,
.theme-paper textarea,
.theme-paper summary { color: var(--ink); }

.theme-paper .panel,
.theme-paper nav a,
.theme-paper .btn,
.theme-paper input,
.theme-paper textarea,
.theme-paper details { border-color: rgba(26,26,26,.25); }


.theme-paper2{ background:#bbb; color: var(--ink); }






    /* Header (initial state: big, centered) */
    header{
      position:relative;
      padding:28px 0 22px;
      background:var(--bg);
    }

    .brand{
      display:flex;
      flex-direction:column;
      align-items:center;
      margin-bottom: 100px;
      gap:14px;
    }

    /* BIG logo at top */
    .brand img{
      width:800px;
      max-width:min(800px, 92vw);
      height:auto;
      display:block;
    }

    /* Nav row under logo */
    nav{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:12px;
      padding:0 10px 10px;
    }

    nav a{
      text-decoration:none;
            border:1px dashed #60747B ;   /* only A/B */
border-radius: 10px;
      padding:12px 14px;
      font-size:16px;
      letter-spacing:.02em;
      transition:transform .15s ease;
    }
    nav a:hover{transform:translateY(-1px);background-color:#B4A166 }

    /* Sticky bar that appears on scroll (smaller) */
.sticky{
  position:fixed;
  left:0; right:0; top:0;
  z-index:50;
  transform:translateY(-110%);
  box-shadow: 0 20px 90px rgba(0,0,0,.18);
  transition:transform .22s ease;
  margin-bottom: 20px;
  background: var(--B);                 /* voll-dunkel */
  opacity: 94%;
  border-bottom:0px dashed var(--A);    /* oder currentColor */
}
.sticky, .sticky * { color: var(--A); }
.sticky nav a{ border-color: var(--A); }


    body.is-sticky .sticky{transform:translateY(0);}

    .sticky-inner{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      padding:10px var(--pad);
      max-width:var(--max);
      margin:0 auto;
    }

   

    .sticky nav{
      padding:0;
      gap:10px;
    }

   
    /* Type */
    h1{
      margin:0 0 14px 0;
      font-size:clamp(40px, 6vw, 78px);
      line-height:1.02;
      letter-spacing:-.02em;
    }
    h2{
      margin:0 0 14px 0;
      font-size:clamp(26px, 3.4vw, 42px);
      line-height:1.1;
      letter-spacing:-.01em;
    }

        h2a{
      margin:0 0 0px 0;
      font-size:clamp(26px, 3.4vw, 29px);
      text-align: justify;
      line-height:1.3;
      letter-spacing:-.01em;
    }


    h3{
      margin:0 0 10px 0;
      font-size:clamp(18px, 2.2vw, 24px);
      line-height:1.15;
    }

  hx{
      margin:0 0 10px 0;
      font-size:clamp(44px, 2.2vw, 24px);
      line-height:1.15;
    }

      h9{
      margin:0 0 30px 0;
      font-size:clamp(44px, 2.2vw, 24px); color:#191656; margin-bottom: 20px; background-color:#B4A166;padding: 5px;  box-shadow: 0 20px 30px rgba(0,0,0,.18);
     
    }

      h11{
      margin:0 0 10px 0;
      font-size:clamp(40px, 2.2vw, 24px); color:#191656; background-color:transparent;padding: 10px;  box-shadow: 0 20px 30px rgba(0,0,0,.18);
     
    }

         h10{
      font-size:clamp(22px, 2.2vw, 24px); color:#191656;padding-bottom: 40px; background-color:#B4A166;padding: 5px;  box-shadow: 0 20px 30px rgba(0,0,0,.18);
     
    }

    p, li{
      margin:0;
      font-size:16px;
      line-height:1.7;
      opacity:.92; /* no extra color */
    }
    .lead{
      font-size:22px;
      background-color: #B4A166;
      padding: 10px !important;
      margin-top: 20px;
      color: #191656;
      border-radius: 22px;
  box-shadow: 0 20px 30px rgba(0,0,0,.18);

      line-height:1.75;
      max-width:72ch;
      opacity:.95;
    }


      .lead5{
      font-size:10px;
      background-color: #B4A166;
      padding: 5px !important;
      color: #191656;
      border-radius: 22px;
  box-shadow: 0 30px 30px rgba(0,0,0,.18);

      line-height:1.75;
      max-width:100%;
      opacity:.95;
    }


    .lead2{
      font-size:22px;
      background-color: #bbb;

      padding: 10px !important;
      margin-top: 0px;
      color: #191656;
      border-radius: 22px;
  box-shadow: 0 20px 30px rgba(0,0,0,.18);

      line-height:1.75;
      max-width:72ch;
      margin-bottom: 44px;

      opacity:.95;
    }


        .lead4{
      font-size:33px;
      background-color: transparent;

      padding: 10px !important;
      margin-top: 0px;
      color: #191656;
      border-radius: 22px;
  box-shadow: 0 20px 30px rgba(0,0,0,.18);

      line-height:0.90;
      max-width:72ch;
      margin-bottom: 44px;

      opacity:.75;
    }



   .lead3{
      font-size:32px;
      background-color: transparent;
      padding: 8px !important;
      margin-top: 20px;
      color: #191656;
      border-radius: 22px;
  box-shadow: 0 20px 30px rgba(0,0,0,.18);

      line-height:0.35;
      opacity:.90;
    }


    .kicker{
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:12px;
      opacity:.85;
    }

    /* Minimal panels: only borders, no third color backgrounds */
    .panel{
      border:0px solid currentColor;
      border-radius:var(--radius);
      padding-bottom:10px;
    }

    .hl{
      border-bottom:2px solid currentColor;
      padding:0 .08em;
    }

  .hl4{
      padding:0 .08em ;border-radius: 20px;color:#B4A166 ;

    }


    .hl2{
      background-color:#B4A166 ;
      padding:1px;border-radius: 2px;
    }


    .hlx{
      background-color:#191656;color:#bbb;
      padding:2px;border-radius: 2px;
    }


   .hl3{
      background-color:transparent ;
      padding:10px;border-radius: 20px;    box-shadow: 0 5px 20px rgba(0,0,0,.18); /* Schatten */

    }


    /* Grid */
    .grid{display:grid; gap:28px;}
    .two{grid-template-columns:1.1fr .9fr;}
    @media (max-width: 900px){ .two{grid-template-columns:1fr;} }





.icon-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}

@media (max-width: 900px){
  .icon-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .icon-grid { 
    grid-template-columns: 1fr !important; 
  }
  /* Das sorgt dafür, dass die 5. Säule nicht mehr quer liegt */
  .säule-5 { 
    grid-column: span 1 !important; 
  }
  .icon {
    padding: 20px;
  }
}

/* verhindert iPhone-overflow/komische Breiten */
.icon{ min-width:0; }
.icon > div{ min-width:0; }


    .icon svg{flex:0 0 22px; margin-top:3px; opacity:.95;}
    .icon b{display:block; margin-bottom:6px; font-size:16px;}
    .icon small{display:block; line-height:1.55; opacity:.92;}

.icon{
  /* …deine bestehenden properties… */
  align-items:flex-start;
  min-width:0;
}


@media (max-width: 520px){
  .icon{
    padding:16px;          /* mehr Luft auf iPhone */
    gap:12px;
  }
  .icon b{
    font-size:18px;        /* Titel lesbarer */
    line-height:1.2;
  }
  .icon small{
    font-size:15px;
    line-height:1.6;
  }
}


    /* Accordion (border-only) */
    details{ 
      border:1px solid currentColor;
      border-radius:10px;
      padding:5px;
    }
    details + details{margin-top:30px;}
    summary{
      cursor:pointer;
      list-style:none;
      font-size:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    summary::-webkit-details-marker{display:none;}
    .chev{transition:transform .18s ease; opacity:.9;}
    details[open] .chev{transform:rotate(180deg);}
    .content{margin-top:10px;}
    ul{margin:10px 0 0 18px; padding:0;}
    li{margin:6px 0;}

    /* Buttons (two-color only) */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 16px;
      border-radius:999px;
      border:1px solid currentColor;
      text-decoration:none;
      background:transparent;
      font-size:14px;
      letter-spacing:.02em;
      transition:transform .15s ease;
    }
    .btn:hover{transform:translateY(-1px);}

    /* Forms (border-only, transparent) */
    form{display:grid; gap:10px;}
    label{font-size:13px; opacity:.9;}
    input, textarea{
      width:100%;
      padding:12px;
      border-radius:14px;
      border:1px solid currentColor;
      background:transparent;
      color:inherit;
      font:inherit;
      font-size:15px;
      outline:none;
    }
    input::placeholder, textarea::placeholder{color:inherit; opacity:.7;}
    textarea{min-height:130px; resize:vertical;}
    .row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
    @media (max-width: 700px){ .row{grid-template-columns:1fr;} }
    .fine{font-size:12px; opacity:.85; margin-top:6px;}

    footer{
      padding:36px 0 44px;
      color: #;background-color:#B4A166;
      border-top:1px dashed currentColor;
    }

    /* Responsive logo tuning */
    @media (max-width: 520px){
      .brand img{width:min(420px, 92vw);}
      section{padding:78px 0;}
    }



.bio{
  display:grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

.bio-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

/* Mobil: Bild oben, Text darunter */
@media (max-width: 800px){
  .bio{
    grid-template-columns: 1fr;
    gap:18px;
  }
  .bio-img{
    max-width:800px;
    margin:0 auto;
  }
}




.banner{
  max-width:500px;
  margin:0 auto;
  text-align:center;
}

.banner-img{
  width:100%;
  height:auto;
  display:block;
    box-shadow: 0 14px 20px rgba(0,0,0,.18); /* Schatten */

  border-radius:30px;   
              /* abgerundete Ecken */
  margin-bottom:16px;                 /* Luft zum kicker */
}


.legal-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.legal-modal.is-open{ display:block; }

.legal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.legal-dialog{
  position:relative;
  max-width: 920px;
  margin: 6vh auto;
  width: calc(100% - 44px);
  max-height: 88vh;
  overflow:auto;

  background: var(--paper);
  color: var(--ink);

  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 28px;
}

.legal-title{
  margin:0 0 14px 0;
}

.legal-content p{
  margin: 0 0 12px 0;
  line-height: 1.7;
}





.legal-close{
  position:absolute;
  top:16px;
  right:16px;

  /* Tap-Fläche */
  width:56px;
  height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  outline:none;

  font-size:44px;   /* <- X größer */
  font-weight:600;
  line-height:1;
  cursor:pointer;

  color: var(--A);  /* oder: currentColor */
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color: transparent;
}

/* optional: noch größer auf iPhone */
@media (max-width:520px){
  .legal-close{
    width:64px;
    height:64px;
    font-size:52px;
  }
}





    /* iOS / Safari default styles killen */
  -webkit-appearance:none;
    font-size:30px;

  appearance:none;
  border:0;
  background:transparent;

  /* Farbe fixieren */
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);

  font: inherit;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}



  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.legal-close:focus,
.legal-close:focus-visible{ outline:none; box-shadow:none; }

.legal-close{
  outline: none;
  -webkit-tap-highlight-color: transparent; /* iOS Tap-Highlight */
}

  /* iOS / Safari default styles killen */



body.modal-open{ overflow:hidden; }


/* Sticky: Banner oben mittig + Nav darunter klein */
.sticky-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px var(--pad) 12px;
  max-width:var(--max);
  margin:0 auto;
}

.sticky-banner{
  width:min(250px, 92vw);
  height:auto;
  display:block;

}

/* Sticky Nav klein und kompakt */
.sticky-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:0;
}

.sticky-nav a{
  padding:2px 2px;
  font-size:13px;
  letter-spacing:.01em;
  border-radius:3px;
  border:0px dashed transparent;
}

/* Optional: Sticky etwas höher machen (weil Banner) */
.sticky{
  transform:translateY(-140%);
}
body.is-sticky .sticky{transform:translateY(0);}

/* Mobile: Sticky-Banner größer */
@media (max-width:520px){
  .sticky-banner{
    width: min(520px, 96vw) !important;  /* größer */
    max-width: none !important;          /* nicht kappen */
    height: auto !important;
    max-height: none !important;         /* <- WICHTIG: killt 34px-limit */
    object-fit: contain;
    display:block;
    border-radius:16px;
  }




  .sticky-nav a{ font-size:15px; padding:2px 9px; }
}

.hero-logo{
  transition: opacity .95s ease, transform .35s ease, max-height .35s ease;
  transform-origin: center top;
}



/* sobald sticky aktiv ist: Logo ausfaden */
body.is-sticky .hero-logo{
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  pointer-events: none;
}

/* optional: Platz oben “zusammenziehen”, damit nicht so viel Luft bleibt */
body.is-sticky header{
  padding-top: 10px;
  padding-bottom: 10px;
  transition: padding .35s ease;
}

/* optional: wenn du willst, dass der Header nicht so hoch bleibt */
body.is-sticky .brand{
  gap: 0;
}








/* BIO BILD: wird über JS per CSS-Variable gesteuert */
.bio-fade{
  opacity: var(--bio-o, 0);
  transform: translateY(calc((1 - var(--bio-o, 99)) * 8px));
  transition: opacity .88s linear, transform .5s linear; /* nur Glättung */
  will-change: opacity, transform;
}


/* MOBILE: Hero-Logo wirklich im Screen zentriert (ohne absolute) */
@media (max-width: 900px){

  header#top{
    min-height: 100svh;          /* besser als 100vh auf Mobile */
    padding: 0 !important;
    display: flex;
    align-items: center;         /* vertikal */
    justify-content: center;     /* horizontal */
  }

  header#top .brand{
    margin: 0 !important;        /* du hattest margin-bottom:100px */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  header#top .hero-logo{
    position: static !important; /* killt absolute */
    transform: none !important;
    width: min(92vw, 520px);
    height: auto;
    display: block;



  }



}




.bio-left{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bio-quote{
  margin:0;
  padding:14px 16px;
  border-radius:18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  background: transparent;       /* bleibt bei deinen 2 Farben clean */
}

.bio-quote blockquote{
  margin:0;
  font-size:13px;
  text-align: justify !important;
  line-height:1.7;
  opacity:.22;
}

/* Mobile: Bild + Quote bleibt zusammen oben */
@media (max-width:800px){
  .bio-left{ gap:12px; }
  .bio-quote blockquote{ font-size:15px;  text-align: justify;
 }
}



    /* Intro text (ruhig, klar, zweispaltig) */
    .intro-text{
      max-width: 900px;
      text-align: justify;
      margin: 0 auto;
      column-count: 2;
      column-gap: 48px;
    }
    .intro-text p{
      font-size: 16.5px;
      line-height: 1.95;
      margin-bottom: 18px;
      break-inside: avoid;
    }
    @media(max-width:900px){
      .intro-text{ column-count:1; }
    }








body.show-logo .hero-logo{
  opacity: 1;                 /* Logo erscheint */
  transform: translateY(0);
}




/* WICHTIG: diese globale Regel killt dir die Kontrolle, weil sie beide Bilder trifft.
   Entweder löschen oder neutralisieren: */
.brand img{ width:auto; max-width:100%; height:auto; display:block; }

/* Layout: beide Bilder übereina






/* Header füllt Screen + zentriert */
header#top{
  min-height: 100svh;
  padding: 0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Stack: beide exakt übereinander in der Mitte */
header#top .hero-stack{
  margin:0 !important;
  width:100%;
  display:grid;
  place-items:center;
  position:relative;
}

/* Überschreibt alte .brand img Regel */
header#top .hero-stack img{
  grid-area: 1 / 1;
  display:block;
  height:auto;
}

/* Größen */
.hero-banner{ width: min(860px, 100%) !important; }

/* Animation: Banner rein -> raus (kleiner) -> Logo rein */
.hero-banner{
  opacity:1;
  transform: translateY(0) scale(1);
  animation: bannerIn 1000ms ease-out forwards,
             bannerOut 2222ms ease-in forwards;
  animation-delay: 1000ms, 40ms;
}



.hero-logo{
  opacity:0;
  width: 100%;
  transform: translateY(0) scale(1);
  animation: logoIn 1220ms ease-out forwards;
  animation-delay: 2200ms;
}

@keyframes bannerIn{
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes bannerOut{
  to{ opacity:0; transform: translateY(0) scale(.78); } /* bleibt mittig */
}
@keyframes logoIn{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* optional: sehr kleine Screens */
@media (max-width:720px){
  .hero-logo{ width: min(720px, 92vw); }
}


















header#top .brand{
  width:100%;
  justify-content:center;
  align-items:center;
}






/* Sticky immer kompakt */
.sticky-banner{
  width: min(200px, 92vw) !important;
  height: auto;
  object-fit: contain;
  display:block;
}



.sticky-nav a{
  font-size: 12px;

  padding: 2px 8px;
}

.sticky-inner{
  padding: 8px var(--pad) 10px;
  gap: 6px;
}


@media (max-width:520px){
  .sticky-banner{
    width: min(220px, 78vw);
    max-height: 34px;
  }
}



/* Divider zwischen Sections */
section{
  position: relative;
}



/* nur zwischen zwei sections (nicht ganz oben) */
section + section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:0;
  border-top:1px solid rgba(25,22,86,.35); /* nutzt deine A-Farbe als Alpha */
}


/* Mini-Logo exakt in der Mitte auf der Linie */
section + section::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -50%); /* sitzt auf der Linie */
  width:90px;                      /* Größe anpassen */
  height:90px;
  background: url("sw2.jpg") center/contain no-repeat;
  border-radius:999px;

  /* damit die Linie "unterbrochen" wirkt */
  background-color: inherit;        /* nimmt Section-Farbe */
  padding:20px;                     /* mehr “Freiraum” um das Logo */
  box-sizing: border-box;
}

/* Mobile etwas kleiner */
@media (max-width:700px){
  section + section::after{
    width:46px;
    height:46px;
    padding:8px;
  }
}

.credit-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  opacity: .95;
}
.credit-link:hover{
  border-bottom-style: solid;
  opacity: 1;
}



/* Der neue flexible Container - kein Wackeln mehr möglich */
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center; /* Zentriert die 5. Säule am Desktop */
  margin-top: 24px;
}

/* Die Boxen passen sich nun intelligent an */
.icon {
  flex: 1 1 300px; /* Basisbreite 300px, wächst bei Platz */
  display: flex;
  gap: 15px;
  align-items: flex-start;
  border: 1px solid currentColor !important;
  border-radius: 16px;
  padding: 20px;
  background: rgba(25, 22, 86, 0.03);
  min-width: 0; /* Verhindert iPhone-Overflow */
  text-align: left;
}

/* Desktop-Feinschliff: Damit die Boxen in 3er-Reihen bleiben */
@media (min-width: 901px) {
  .icon {
    max-width: calc(33.33% - 11px);
  }
}

/* Tablet: 2 Spalten */
@media (max-width: 900px) and (min-width: 601px) {
  .icon {
    max-width: calc(50% - 8px);
  }
}

/* Mobile: Volle Breite ohne Kompromisse */
@media (max-width: 600px) {
  .icon {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 18px;
  }
}





.bio-right{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
  min-width:0; /* wichtig gegen Layout-Shift/Drücken */
}

.quote-big{
  margin:0;
  font-size:30px;
  line-height:1.35;
  text-align:left;          /* wirkt edler als justify bei großen Quotes */
  opacity:.95;
}



/* Mobile: Volle Breite ohne Kompromisse */
@media (max-width: 800px) {
  
.quote-big{
  margin:0;
  margin-top: 10px;
  font-size:22px;
  line-height:1.35;
  text-align:left;          /* wirkt edler als justify bei großen Quotes */
  opacity:.95;
  }
}







.bio-sep{
  width:100%;
  border:0;
  border-top:1px dashed rgba(25,22,86,.35);
  margin:0;
}

.bio-subhead{
  margin:0;
  font-size:35px;
  line-height:1.1;
}


/* Mobile: Volle Breite ohne Kompromisse */
@media (max-width: 800px) {
  
.bio-subhead{
  margin:0;
  font-size:25px;
  line-height:1.1;
}

}






.bio-text{
  margin:0;
  font-size:16px;
  line-height:1.7;
  max-width:72ch;
  text-align:left;          /* wenn du justify willst: hier statt überall */
}


.breakword{
  overflow-wrap:anywhere;
  word-break:break-word;
}