/* main.css - thiemann.com */
:root {
  --bg:#c1f0fc;
  --text:#000;
  --radius:12px;
  --brandblue:#5271ff;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --container:100%;              /* mobil: volle Breite */
  --section-space:clamp(24px,6vw,64px);
}
/* Ab Tablet-Breite Container begrenzen */
@media (min-width: 768px) {
  :root {
    --container:760px;
  }
}

  /* Base */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.7 Helvetica, Arial, sans-serif;
  }
  img{max-width:100%;height:auto;}
  /* Layout & type scale */
  .container{max-width:var(--container);margin-inline:auto;padding-inline:16px}
  .center{text-align:center}
  .section{margin-block:var(--section-space)}
  .section--tight{margin-block:clamp(20px,4vw,40px)}
  .lead{font-size:clamp(18px,2.1vw,20px)}
  .quote{font-size:clamp(15px,2.0vw,17px);margin-top:1.8em}
  .lead-italic{font-style:italic}
  h1{font-size:clamp(24px,4.2vw,40px);line-height:1.2;margin:24px 0 0;text-align:center;font-weight:700}
  h2{font-size:clamp(20px,3.2vw,28px);line-height:1.3;margin:24px 0 12px;text-align:center;font-weight:700;}
  h3{font-size:clamp(16px,3.0vw,21px);line-height:1.4;margin:12px 0 12px;text-align:center;font-weight:700;}
  hr{border:none;border-top:1px solid rgba(0,0,0,.12);width:98%;margin:var(--section-space) auto}
  h2.title{color:var(--brandblue);margin-bottom:0px}
  h3.title{margin-top:2.0em}
  a{color:inherit}
  a.neutral{text-decoration:none}
  a.neutral:hover{text-decoration:underline}
  a.photolink{font-size:80%}
  ul {padding-left:1.5em; padding-right:1.5em; line-height:1.3;}
  li {margin-bottom:0.5em;}

  /* Buttons */
  .btn{
    display:inline-block;background:#66bb8e;color:#fff;text-decoration:none;
    padding:12px 18px;border-radius:999px;transition:transform .15s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn--ghost{background:transparent;border:1px solid #000;color:#000}
  /* Logos */
  .logo-row{display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap}
  .logo-row img{height:48px}
  
/* Standard: mobil = 1 Spalte */
.grid-3 {
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  justify-items: center;
}
.grid-2 {
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
}
/* Ab 600px: 2 Spalten für .grid-3 */
@media (min-width: 600px) {
  .grid-3 {
    grid-template-columns:repeat(2, minmax(0,1fr));
    justify-items: center;
  }
  /* soll das letzte über beide Spalten gehen und zentriert sein */
  .grid-3 > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;      /* über beide Spalten */
    justify-self: center;     /* Inhalt in der Zeile zentrieren */
    max-width: 360px;         /* optional: nicht zu breit werden lassen */
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Ab 900px: 3 Spalten für .grid-3, 2 Spalten für .grid-2 */
@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  /* Auf großen Screens wieder „normal“, keine Sonderbehandlung nötig */
  .grid-3 > *:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }
  .grid-2 {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
  
  
  .ibox{
    background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
    padding:16px 18px; margin:10px;
  }
  .ibox__title{margin:0 0 .25rem 0;font-size:20px;color:#5271ff}
  .ibox__lead{margin:.5rem 0 0 0;font-style:italic}

  @media all and (max-width:500px){
    table{
        width:100%;
    }
    td{
        display:block;
        width:100%;
    }
    tr{
        display:block;
        margin-bottom:30px;
    }
    tr tr{
        margin-bottom:0;
    }
  }


  /* Language Switch */
  .lang-switch {
    position: fixed;
    text-align: right;
    top: 20px;
    right: 24px;
    z-index: 999;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 6px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  .lang-switch a {
    text-decoration: none;
    margin: 0 4px;
    color: #000;
  }
  .lang-switch a:hover {
    text-decoration: underline;
    opacity: 1;
  }
@media (max-width: 480px) {
  .lang-switch {
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 0.85rem;
  }
}