/* J.A. Share GmbH – gemeinsame Styles (Schrift lokal, Bildschutz, Cookie-Hinweis) */

/* Schrift: Hanken Grotesk, lokal gehostet (keine Verbindung zu Google) – SIL Open Font License, siehe fonts/OFL.txt */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/hanken-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/hanken-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}

/* Bildschutz: kein Ziehen, kein "Bild sichern" beim langen Drücken (iOS), keine Markierung */
img,picture,.vn{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Vorher/Nachher-Regler: Griff gut greifbar, Seite scrollt auf dem Handy weiter senkrecht */
.vn input[type=range]{touch-action:pan-y}

/* Cookie-Hinweis */
.cookie-banner{position:fixed;z-index:100;left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));bottom:max(16px, env(safe-area-inset-bottom, 0px));
  max-width:520px;margin-left:auto;background:#0c1413;color:#ffffff;padding:20px 22px;display:flex;flex-direction:column;gap:14px;
  font:15px/1.55 "Hanken Grotesk","Helvetica Neue",Arial,sans-serif;box-shadow:0 18px 48px rgba(0,0,0,0.28);border-top:3px solid #0e7c7b}
.cookie-banner p{margin:0;color:rgba(255,255,255,0.85)}
.cookie-banner a{color:#34b3b0}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-actions button{flex:1 1 140px;font:inherit;font-weight:600;min-height:46px;padding:11px 16px;border-radius:2px;cursor:pointer;border:1px solid #0e7c7b}
.cookie-actions .cb-reject{background:transparent;color:#ffffff;border-color:rgba(255,255,255,0.55)}
.cookie-actions .cb-accept{background:#0e7c7b;color:#ffffff}
.cookie-actions button:hover{filter:brightness(1.12)}

/* Formular-Meldungen (Kontakt) */
.fmsg{padding:20px 22px;border-top:3px solid #b3261e;background:#fbeeed;color:#0c1413}
.fmsg ul{margin:8px 0 0;padding-left:20px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

@media print{.cookie-banner{display:none}}

/* Kopfzeile: auf schmalen Bildschirmen Menü-Knopf statt umbrechender Navigation */
.mb{display:none;flex:none;width:48px;height:48px;align-items:center;justify-content:center;background:#ffffff;color:#0c1413;border:1px solid #0c1413;border-radius:2px;cursor:pointer;padding:0}
.mb .mb-x{display:none}
.mb[aria-expanded="true"] .mb-o{display:none}
.mb[aria-expanded="true"] .mb-x{display:inline}
@media (max-width:1000px){
  header>.in{flex-wrap:wrap!important;row-gap:0!important}
  .mb{display:inline-flex}
  .nv{display:none!important;flex:1 0 100%;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding-top:12px;font-size:18px!important}
  .nv.open{display:flex!important}
  .nv a{padding:14px 0!important;border-top:1px solid #e4e9e8}
  .nv a:last-child{justify-content:center;margin-top:14px;padding:16px 18px!important;border-top:0}
}
/* Hover auf dem Anfrage-Knopf: Schrift bleibt weiß */
.nv a:last-child:hover{color:#ffffff!important;background:#0a5f5e!important}

/* Liste der ausgewählten Fotos im Anfrageformular */
.fotoliste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.fotoliste li{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f4f6f6;padding:6px 6px 6px 14px;min-width:0}
.fotoliste span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fotoliste button{flex:none;border:0;background:none;font:inherit;font-size:24px;line-height:1;color:#4a5052;cursor:pointer;min-width:40px;min-height:40px}
.fotoliste button:hover{color:#b3261e}