:root{
  --brand:#0a6b6b; --brand-2:#0f8f8f;
  --bg:#ffffff; --text:#1a1a1a;
  --muted:#6b7280; --surface:#f6f9fa; --accent:#ffd08a; --line:#e5e7eb;
}

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.6;
}

.wrap{max-width:1120px;margin:0 auto;padding:20px;}

/* Header */
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-logo{width:120px;height:auto;display:block;float: right;}
.brand-title{font-weight:800;font-size:1.25rem;color:var(--brand);}
nav a{margin-left:14px;color:var(--brand);text-decoration:none;font-weight:600}
nav a:first-child{margin-left:0}
nav a:hover{text-decoration:underline}

/* Hero */
.hero{
  background:linear-gradient(180deg,#eef8f7, #ffffff 60%);
  border:1px solid #e7f2f2;border-radius:18px;padding:28px;margin:10px 0 24px;
}
.kicker{
  display:inline-block;background:var(--accent);color:#1a1a1a;
  padding:4px 10px;border-radius:999px;font-weight:700;font-size:.9rem;margin-bottom:8px
}
.hero h1{margin:0 0 8px;font-size:2rem}
.hero p{margin:0;color:#374151}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;
  border:2px solid var(--brand);color:white;background:var(--brand);
}
.btn--outline{background:transparent;color:var(--brand);}

/* Sections / Grid */
.section{padding:18px 0;border-top:1px solid #eef2f7}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}

/* Typo & Media */
h2{margin:0 0 10px;font-size:1.5rem}
h3{margin:12px 0 6px;font-size:1.15rem}
.muted{color:var(--muted)}
.media{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.tiles h3{margin:8px 0 6px}
.link{color:#0e7490;text-decoration:none;font-weight:700}
.link:hover{text-decoration:underline}

/* Badges & Zitat */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{background:#eef2f7;color:#0e7490;border-radius:999px;padding:4px 10px;font-size:.9rem;border:1px solid #dbe7ee}
.quote{background:#fff;border:1px solid #ffe1b3;border-radius:12px;padding:12px;margin-top:12px}

/* Footer + Abschlusslogo */
footer{margin:28px 0 10px;padding:18px 0;border-top:1px solid var(--line);font-size:.95rem;color:#374151}
footer a{color:var(--brand);text-decoration:none}
footer a:hover{text-decoration:underline}

.footer-meta{margin-bottom:10px}
.footer-logo-band{
  border-top:1px solid #e9eff2;
  margin-top:12px;
  padding-top:16px;
  display:flex;justify-content:center;align-items:center;
}
.footer-logo{width:60%;height:auto;display:block;opacity:0.95}

/* Responsive */
@media (max-width:900px){
  .col-3,.col-4,.col-6,.col-8{grid-column:span 12}
  .hero h1{font-size:1.65rem}
  nav{width:100%}
  nav a{display:inline-block;margin:6px 10px 0 0}
}

/* Hier kommt die Anpassung der Bilder an die Breite des Bildschirms von ChatGpt **/
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Hier endet die Anpassung der Bilder an die Breite des Bildschirms von ChatGpt **/



/* Accessibility */
a:focus{outline:3px solid var(--accent);outline-offset:2px}


/* Hier kommen Pastellfarben von ChatGPt für die einzelnen Kästen, damit etwas mehr Leben reinkommt 04.11.2025
/* 1) Basis: Karten-Hintergrund wirklich überschreiben */
.card {
  /* Pastell als Default – fällt auf, wenn Rotation nicht greift */
  --card-bg: #f7fafc;
  background: var(--card-bg) !important;
  border-color: rgba(10,107,107,0.08);
  transition: background .25s ease, transform .2s ease, box-shadow .2s ease;
}
.card {
  display: block;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}


/* 2) Rotation über Grid-Position (funktioniert zuverlässig) */
.grid > *:nth-child(3n+1) .card { --card-bg: #fdf6f9; } /* rosé */
.grid > *:nth-child(3n+2) .card { --card-bg: #f7fafd; } /* hellblau */
.grid > *:nth-child(3n+3) .card { --card-bg: #f9fcf7; } /* mint */


/* 3) Utility-Klassen, falls du gezielt färben willst (auch außerhalb von .grid) */
.card--rose { --card-bg: #fdf6f9; }
.card--blue { --card-bg: #f7fafd; }
.card--mint { --card-bg: #f9fcf7; }
.card--sand { --card-bg: #fff9f0; }

/* 4) Optional: CTA-/Hero-Karten etwas „glowiger“ */
#kontakt-cta .card,
.hero .card {
  --card-bg: linear-gradient(135deg, #faf4ff 0%, #f4f9ff 100%);
  background: var(--card-bg) !important;
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
}


/* -------------------------------------------- */
/* Kräftigerer Pastell-Hover für Karten - alles kommt von CHatGPT*/
/* -------------------------------------------- */
.card {
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

/* Rosé-Karte */
.grid > *:nth-child(3n+1) .card:hover,
.card--rose:hover {
  background-color: #fbe3eb !important;
}

/* Hellblau-Karte */
.grid > *:nth-child(3n+2) .card:hover,
.card--blue:hover {
  background-color: #e6f1fb !important;
}

/* Mint-Karte */
.grid > *:nth-child(3n+3) .card:hover,
.card--mint:hover {
  background-color: #e5f8ea !important;
}

/* Sand-Karte (falls du sie nutzt) */
.card--sand:hover {
  background-color: #fff2d9 !important;
}

/* sanfter Schatten-Boost beim Hover */
.card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transform: translateY(-4px);
}
/* -------------------------------------------- */
/* Gloss-Effekt (dezent, modern, nur bei Hover) */
/* -------------------------------------------- */
.card {
  position: relative;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -50%;
  width: 200%;
  height: 300%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.35) 45%,
    rgba(255,255,255,0.0) 90%
  );
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.7s ease;
  pointer-events: none;
}

.card:hover::after {
  opacity: 1;
  transform: translateY(50%) rotate(10deg);
}

/* Optional: Für CTA-Karten oder Highlights etwas stärker */
#kontakt-cta .card::after {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.0) 100%
  );
}

/* -------------------------------------------- */
/* Gloss- / Shine-Effekt für Buttons             */
/* -------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* Glanzebene */
.btn::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -50%;
  width: 200%;
  height: 300%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.0) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.8s ease;
  pointer-events: none;
}

/* Bewegung + Glanz beim Hover */
.btn:hover::after {
  opacity: 1;
  transform: translateY(50%) rotate(10deg);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Für Outline-Buttons subtiler Effekt */
.btn--outline::after {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.0) 100%
  );
}

/* Optional: etwas hellere Farbwirkung beim Hover */
.btn:hover {
  filter: brightness(1.05);
}


/* -------------------------------------------- */
/* Leichter Klick-/Pressed-Effekt für Buttons    */
/* -------------------------------------------- */

.btn:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset;
  transition: transform 0.05s ease, box-shadow 0.1s ease;
}

/* outline-Variante etwas dezenter */
.btn--outline:active {
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset;
}

/* Touch-Feedback verbessern (mobil) */
@media (hover: none) {
  .btn:active {
    filter: brightness(0.95);
  }
}

/* Nur auf Touch-Geräten (iOS/Android) */
@media (hover: none) {
  /* Karten wirken etwas „lebendiger“, auch ohne Hover */
  .card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease;
  }

  /* Tap-Feedback (kurzer Lift + kräftigerer Pastellton) */
  .card:active {
    transform: translateY(-2px) scale(0.99);
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    filter: brightness(1.03);
  }

  /* Buttons: sichtbares Tap-Feedback */
  .btn {
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  }
  .btn:active {
    transform: scale(0.97) translateY(1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    filter: brightness(1.06);
  }
}

@media (hover: none) {
  /* Basis: Gloss-Pseudo ist schon in deiner CSS vorhanden; hier animieren wir es bei Tap */
  .card:active::after {
    opacity: 1;
    animation: cardGlossMobile .8s ease;
  }
  @keyframes cardGlossMobile {
    0%   { transform: translateY(-40%) rotate(10deg); opacity:.0; }
    15%  { opacity: .9; }
    100% { transform: translateY(55%) rotate(10deg); opacity:0; }
  }

  .btn:active::after {
    opacity: 1;
    animation: btnGlossMobile .7s ease;
  }
  @keyframes btnGlossMobile {
    0%   { transform: translateY(-40%) rotate(10deg); opacity:.0; }
    20%  { opacity: .85; }
    100% { transform: translateY(50%) rotate(10deg); opacity:0; }
  }
}

/* Kacheln, die verlinken, als klickbar kennzeichnen */
a.tile, a.card { cursor: pointer; }

/* iOS: Entfernt den standardmäßigen Tap-Highlight-Balken */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }


/* Ergänzung von ChatGPT wegen aufklappbarem Bereich bei den Beschreibungen */

.section-details {
  margin-top: 0.5rem;
}

.section-details summary {
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.section-details[open] summary {
  margin-bottom: 0.5rem;
}

/* Optional: leichte Trennung zum Teaser */
.section details {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Ende der Ergänzung von ChatGPT wegen aufklappbarem Bereich bei den Beschreibungen */