/* Website Kugler Massage - Aussehen wie die frühere Jimdo-Seite (Masse und Farben dort gemessen).
   Schriften vom eigenen Server (OFL-Lizenz), keine Skripte. Handy-Ansicht bis 767 px Breite. */

@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/source-sans-pro-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/roboto-400.woff2") format("woff2"); }

:root {
  --grund: #e4e1df;
  --orange: #f90;
  --fuss: #d27e00;
  --lila: #291333;
  --text: #3f3828;
  --link: #dbb31c;
  --link-hover: #4f778a;
  --arial: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/24px var(--arial); }
img { max-width: 100%; height: auto; border: 0; }

/* Kopf mit Logo */
.kopf { min-height: 500px; }
.kopf-innen { max-width: 1100px; margin: 0 auto; padding: 75px 20px 0; text-align: center; }
.logo img { display: inline-block; width: 689px; }

/* Navigation (Computer) */
.navigation { padding: 5px 0; background: rgba(238, 238, 238, .65); text-align: center; }
.navigation a { display: inline-block; padding: 10px 11px; color: var(--lila); font: 24px/36px var(--arial);
  letter-spacing: 2px; text-decoration: none; }
.navigation a:hover, .navigation a:focus, .navigation a[aria-current] { color: var(--orange); }

/* Menü auf dem Handy: Schalter ohne Skript (verstecktes Kästchen + Beschriftung) */
.menue-schalter, .menue-knopf, .menue-handy { display: none; }

/* Inhalt */
.inhalt { background: #fff; }
.inhalt-innen { max-width: 1100px; margin: 0 auto; padding: 80px 15px; }
.inhalt-innen::after, .text-mit-bild::after { content: ""; display: table; clear: both; }
/* Wie Jimdo: jeder Baustein hat oben und unten 5 px Innenabstand (die sich nicht überlappen) */
.inhalt-innen > *, .spalte > * { margin-top: 0; margin-bottom: 0; padding-top: 5px; padding-bottom: 5px; }
.inhalt-innen > hr, .spalte > hr { margin: 25px 0; padding: 0; }
h1 { margin: 0; color: var(--orange); font: bold 60px/90px var(--arial); }
h2 { margin: 0; color: var(--orange); font: 34px/1.3 var(--arial); text-align: center; }
h3 { margin: 0; color: var(--lila); font: 32px/40px "Roboto", sans-serif; }
p { margin: 0; }
ul, ol { margin: 16px 0; padding-left: 40px; }
a { color: var(--link); text-decoration: underline; transition: color .2s ease-in-out; }
a:hover, a:focus { color: var(--link-hover); }
hr { border: 0; border-bottom: 1px solid var(--orange); }
.mitte { text-align: center; }
.orange { color: var(--orange); }
.gross { font-size: 20px; line-height: 30px; }
.eng { line-height: 1.2; }

.abstand-5 { height: 5px; } .abstand-10 { height: 10px; } .abstand-20 { height: 20px; }
.abstand-50 { height: 50px; } .abstand-100 { height: 100px; }

figure { margin: 0; }
.bild.links { float: left; margin: 4px 20px 4px 0; }
.bild.rechts { float: right; margin: 4px 0 4px 20px; }
.bild.mitte { text-align: center; }
.bild img { display: block; }
figcaption { font-size: 14px; color: #666; }
.spalten > .spalte .bild.links { float: none; margin: 0; }

.spalten { display: flex; gap: 22px; }
.spalte { min-width: 0; }
.breite-50 { flex: 1 1 50%; }
.breite-33 { flex: 1 1 33%; }
.breite-66 { flex: 2 1 66%; }

/* Bildergalerie (Praxis): Bilder zum Wischen, Punkte springen zum Bild */
.galerie-bilder { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.galerie-bilder figure { flex: 0 0 100%; scroll-snap-align: start; }
.galerie-bilder img { display: block; width: 100%; }
.galerie-punkte { margin-top: 8px; text-align: center; }
.galerie-punkte a { display: inline-block; width: 12px; height: 12px; margin: 0 4px; border-radius: 50%;
  background: #ccc; }
.galerie-punkte a:hover, .galerie-punkte a:focus { background: var(--orange); }

/* Kontaktformular (wie bei Jimdo: Beschriftung links, Feld rechts) */
.formular { margin: 0; }
.feld { display: flex; gap: 2px; padding: 5px 0; }
.feld label { flex: 0 0 176px; }
.feld input, .feld textarea { flex: 1; min-width: 0; padding: 10px; border: 2px solid var(--orange);
  border-radius: 0; background: #fff; color: #333; font: 16px/24px var(--arial); }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--lila); outline-offset: 1px; }
.pflicht { color: var(--orange); }
.knopf-zeile { padding-left: 178px; }
.formular button { margin: 16px 0; padding: 10px 15px; border: 1px solid transparent; background: var(--orange);
  color: #fff; font: 16px/24px var(--arial); cursor: pointer; }
.formular button:hover, .formular button:focus { background: var(--fuss); }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hinweis { font-size: 14px; }
.meldung { padding: 10px 14px; border-left: 4px solid var(--orange); background: #fff7e6; }
.meldung.ok { border-color: #2f855a; background: #f0fff4; }
.meldung ul { margin: 6px 0 0; }

.karte { padding: 20px; border: 1px solid #ddd; background: #faf9f7; text-align: center; }

/* Fuss */
.fuss { padding: 60px 10px 0; background: var(--fuss); color: #fff; font-family: "Source Sans Pro", sans-serif; }
.adresse { max-width: 1100px; margin: 25px auto 0; color: #000; font-size: 20px; line-height: 30px; text-align: center; }
.adresse a { color: #ccc; }
.fuss-links { max-width: 1100px; margin: 0 auto; padding: 45px 20px 80px; font-size: 12.8px; line-height: 19.2px; }
.fuss a { color: #ccc; }
.fuss a:hover, .fuss a:focus { color: #fff; }

/* Fehlerseite */
.fehler-code { color: #999; }

/* Handy */
@media (max-width: 767px) {
  body { padding-top: 50px; }
  .kopf { min-height: 0; padding-bottom: 55px; }
  .kopf-innen { padding: 95px 20px 0; }
  .logo img { width: 340px; }
  .navigation { display: none; }
  .menue-knopf { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 50px;
    padding: 15px 10px; background: #ececec; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; }
  .menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { display: block; position: relative;
    width: 30px; height: 3px; background: #000; content: ""; }
  .menue-knopf span { top: 8px; }
  .menue-knopf span::before { position: absolute; top: -8px; }
  .menue-knopf span::after { position: absolute; top: 8px; }
  .menue-schalter:checked ~ .kopf .menue-handy { display: block; }
  .menue-handy { position: fixed; top: 50px; left: 0; right: 0; z-index: 19; background: #eee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
  .menue-handy a { display: block; padding: 13px 15px; border-bottom: 1px solid rgba(33, 33, 33, .1);
    color: var(--lila); font: 16px/24px var(--arial); text-decoration: none; }
  .menue-handy a[aria-current] { color: var(--orange); }
  .inhalt-innen { padding: 20px 15px; }
  h1 { font-size: 30px; line-height: 45px; }
  h2 { font-size: 26px; }
  h3 { font-size: 24px; line-height: 32px; }
  .spalten { display: block; }
  .bild.links, .bild.rechts { float: none; margin: 0 0 10px; text-align: center; }
  .bild img { display: inline-block; }
  .feld { display: block; }
  .feld label { display: block; }
  .feld input, .feld textarea { width: 100%; }
  .knopf-zeile { padding-left: 0; }
  .fuss { padding-top: 20px; }
  .fuss-links { padding: 45px 20px 50px; }
}