/* Buttons & Links */
a#button {
  background-color:var(--gptbasis); color:#fff;
  font-weight:600; text-decoration:none;
}

button.start, button.start2 {
  background:var(--gptbasis); color:#fff; font-size:15px; height:70px;
}
button.start { width:95%; }
button.start2 { width:50%; }

button.gpt {
  background:var(--gptlila); color:var(--gpthellgruen);
  font-size:15px; height:70px;
}

button.b50, button.b1, button.senden {
  background:var(--gptrot); color:var(--gptgelb);
}
button.b50 { height:70px; width:50%; font-size:15px; margin:5px 5px 5px 0; }
button.b1  { height:30px; font-size:15px; margin:5px 5px 5px 0; }
button.senden { height:70px; width:30%; font-size:15px; float:left; margin:5px 5px 5px 0; }

button.text { height:70px; font-size:15px; }

a.termin, button.termin { height:170px; width:100%; font-size:12px; }
button.linkstudio { height:170px; width:100%; font-size:12px; }
button#linkstudio   { color:var(--gptstudiotext); background:var(--gptstudio); }
button#meisterklasse{ color:#76B3C5; background:#663A78; }
button.kalender { background:var(--gptgelb); color:var(--gptrot); height:70px; width:50%; font-size:15px; font-weight:800; }
button.news     { background:#FAF0E6; color:#000; min-height:270px; text-align:left; vertical-align:top; }
button.spende   { height:100px; width:50%; font-size:20px; background:var(--gptspende); color:var(--gptblau); font-weight:800; }
button.nav_link { width:300%; height:auto; }

a#aktuelles { background:whitesmoke; color:var(--gptlogofarbe); line-height:1.4; text-decoration:none; font-weight:600; }
ul#aktuelles { background:whitesmoke; margin:3px auto; margin-top:1.3em; padding:8px; line-height:1.0; }

/* Themen-/Kampagnenblöcke */
h2.studio, div.studio { background:var(--gptstudio); }
h2.studio { color:var(--gptstudiotext); margin:0 auto; padding:8px; line-height:1.0; }
div.studio { padding:8px; }

h2.mut, div.mut { background:var(--mut); }
h2.mut { color:var(--muttext); margin:0 auto; padding:8px; line-height:1.0; }
div.mut { padding:8px; }

h2.mata, div.mata { background:var(--matabg); }
h2.mata { color:var(--matatext); margin:0 auto; padding:8px; line-height:1.0; }
div.mata { padding:8px; }

h2.vogel { background:var(--vogelbg); color:var(--vogeltext); margin:0 auto; padding:8px; line-height:1.0; }
div.vogel { background:var(--vogelbg); color:var(--vogeltext); padding:8px; }

h2.maus { background:var(--mausbg); color:var(--maustext); margin:0 auto; padding:8px; line-height:1.0; }
div.maus { background:var(--mausbg); color:var(--maustext); padding:8px; }

h2.vetter { background:var(--vetterbg); color:var(--vettertext); margin:0 auto; padding:8px; line-height:1.0; }
div.vetter { background:var(--vetterbg); color:#fff; padding:8px; }

h3.laecheln { background:var(--laechelnbg); color:var(--laechelntext); margin:0 auto; padding:8px; line-height:1.0; }
div.laecheln { background:var(--laechelnbg); color:var(--laechelntext); padding:8px; }

h3.box, h3.boxnews { color:#000; line-height:1.0; margin:0 auto; min-height:50px; padding:0; vertical-align:top; }
h3.box_lila { color:var(--gptlila); } 
h3.box_blau { color:var(--gptblau); } 
h3.box_rot  { color:var(--gptrot); }
h3.box_lila, h3.box_blau, h3.box_rot {
  font-size:10pt; line-height:1.4; text-align:center; min-height:100px; padding:0; margin:0 auto;
}

header h3 { color:var(--gptbasis); margin:3px auto; margin-top:1.3em; padding:8px; line-height:1.0; }
div.hinweis { color:var(--gptbasis); font-weight:600; margin:3px auto; padding:8px; }

.box80 { width:80%; margin-left:10%; margin-right:10%; }

.zitat { background:#fff; color:#8FBC8F; font:italic; padding:8px; text-align:left; }
.zitat-von { background:#fff; color:#708090; padding:8px; text-align:right; }

/* Burger/Close Icons */
#navlink { font-size:2em; position:fixed; top:1em; left:1em; display:inline-block;
  width:1px; overflow:hidden; padding-left:1em; margin-right:2rem; text-decoration:none; }
#navlink::before { content:""; position:absolute; top:.2em; left:0; width:1em; height:.2em;
  border-top:.6em double var(--gptbasis); border-bottom:.2em solid var(--gptbasis); }
#cross-rounded-borders { font-size:2.5em; font-weight:bold; position:fixed; top:.5em; left:1em;
  display:inline-block; width:1px; overflow:hidden; padding-left:1em; margin-right:2rem; text-decoration:none; }
#cross-rounded-borders::before { content:"X"; position:absolute; top:.2em; left:0; width:1em; height:.2em; color:var(--gptbasis); }

ul.menu { list-style:none; text-align:center; font-size:25px; color:var(--gptbasis); text-decoration:none; }
ul.menu li { margin:20px; }
ul.menu li h2 { color:var(--gptlogofarbe); background:var(--gptgelb); font-size:25px; margin:0; padding:0; }
ul.menu li a { color:var(--gptbasis); font-weight:bold; text-decoration:none; margin:1em; border-bottom:.2em solid var(--gptlogofarbe); }

/* === Hinweisboxen ===================================== */
.errors {
  background: #fee;
  border: 1px solid #f5b5b5;
  color: #900;
  padding: .75rem 1rem;
  border-radius: .5rem;
  margin-bottom: 1rem;
}
.success {
  background: #f0fff4;
  border: 1px solid #a3d9a5;
  color: #0b6b2e;
  padding: .9rem 1rem;
  border-radius: .5rem;
  margin: 1rem 0;
}

/* === CTA-Button im Formular =========================== */
/* (passt zu deinem Schema; eigenständige Klasse, damit nichts Altes überschrieben wird) */
button.btn {
  appearance: none;
  border: 0;
  background: var(--gptlogofarbe, #6D5092);
  color: #fff;
  padding: .8rem 1.1rem;
  border-radius: .6rem;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}
@media (hover:hover) {
  button.btn:hover { filter: brightness(1.06); }
}
button.btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gptlogofarbe) 70%, black 10%);
  outline-offset: 2px;
}

/* Honeypot-Feld (unsichtbar für Menschen) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* BRIDGE: Macht input.senden wie .btn */
.kontakt-form .senden {
  appearance: none;
  border: 0;
  background: var(--gptlogofarbe, #6D5092);
  color: #fff;
  padding: .8rem 1.1rem;
  border-radius: .6rem;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  width: auto;       /* statt 30%/66% */
  min-width: 10rem;
}
@media (hover:hover) {
  .kontakt-form .senden:hover { filter: brightness(1.06); }
}
.kontakt-form .senden:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gptlogofarbe) 70%, black 10%);
  outline-offset: 2px;
}