/* Alpinschule Fiss-Ladis, klassieke vorm.
   Alle maten en kleuren zijn op 13 september 2026 gemeten op alpinschule-fiss.at
   bij een venster van 1400 pixels breed. De originele site tekent zijn vlakken met
   kleine GIF-tegels; die zijn hier vervangen door de kleur die erin zit, want een
   vlakke kleur schaalt beter en scheelt vijf verzoeken.

   hg_grey #EBE9E8   logokolom en menubalk
   hg_rot  #BD1A16   het rode balkje onder het logo
   hg_lightgrey #F6F4F4  het tekstvlak
   hg_darkgrey  #E8E5E3  de voetbalk
   tekst #49494A, voettekst #573A35, kop #BE0418, menu-actief #B51E2F
*/

.alpk, .alpk *{box-sizing:border-box}
body.alp-klassiek{background:#fff;margin:0;color:#49494A;font-family:Arial,Helvetica,sans-serif;font-size:11px}
body.alp-klassiek .site, body.alp-klassiek #page{background:#fff}

.alpk{width:901px;margin:0 auto}

/* Astra zet 60px lucht boven en onder de contentkolom en een eigen contentbreedte.
   Op het origineel begint de kop precies 45px onder de menubalk, dus die lucht moet weg.
   Astra hangt die marge aan .ast-plain-container.ast-no-sidebar #primary, dus twee klassen
   plus een id. Daar komt geen redelijke selector meer overheen; voor deze ene maat is
   !important korter en duidelijker dan een nog langere keten die niemand meer leest. */
body.alp-klassiek .site-content .ast-container{max-width:none;width:auto;padding:0;margin:0}
body.alp-klassiek #primary,body.alp-klassiek #secondary,
body.alp-klassiek .content-area,body.alp-klassiek .site-main,
body.alp-klassiek .entry-content{margin:0 !important;padding:0;width:auto;max-width:none}
body.alp-klassiek .entry-content>*{max-width:none;margin-left:0;margin-right:0}

/* ---------- kop ---------- */
.alpk-kop{display:flex}
.alpk-logo{width:180px;height:225px;background:#EBE9E8;display:flex;align-items:center;justify-content:center}
.alpk-logo img{display:block;max-width:160px;height:auto}
.alpk-band{width:721px;height:225px;overflow:hidden}
.alpk-band img{display:block;width:721px;height:225px;object-fit:cover}

.alpk-balken{display:flex}
.alpk-dienst{width:180px;height:34px;background:#BD1A16;display:flex;align-items:center;gap:6px;padding:0 9px}
.alpk-dienst a{display:inline-flex;align-items:center;color:#fff;text-decoration:none;font-size:11px;line-height:1}
.alpk-dienst svg{display:block;fill:#fff}
.alpk-menu{width:721px;height:34px;background:#EBE9E8;display:flex;align-items:center;padding:0 19px}
.alpk-menu a{font-size:13px;color:#49494A;text-decoration:none;letter-spacing:.1em;white-space:nowrap}
.alpk-menu a:hover,.alpk-menu a.hier{color:#B51E2F}
.alpk-menu .streep{color:#49494A;padding:0 12px;font-size:13px}

/* ---------- inhoud ---------- */
.alpk-lijf{display:flex;align-items:stretch;min-height:520px}
.alpk-zij{width:180px;background:#fff}
.alpk-mid{width:539px;background:#F6F4F4;padding:45px 23px 30px}
.alpk-rechts{width:182px;background:#F6F4F4;padding:45px 12px 30px}

.alpk-mid h1,.alpk-mid h2.kop{font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:400;
  color:#BE0418;margin:0 0 20px;line-height:1.14;letter-spacing:0}
.alpk-mid h2{font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:400;color:#BE0418;margin:26px 0 8px}
.alpk-mid p,.alpk-mid li{font-size:11px;line-height:1.45;color:#49494A;margin:0 0 12px}
.alpk-mid ul{margin:0 0 12px;padding-left:16px}
.alpk-mid li{margin:0 0 3px}
.alpk-mid a{color:#BE0418;text-decoration:none}
.alpk-mid a:hover{text-decoration:underline}
.alpk-mid strong{font-weight:700;color:#49494A}

/* het beeld rechtsonder in het tekstvlak, met het rode blokje ervoor */
.alpk-portret{display:flex;justify-content:flex-end;margin:26px 0 0}
.alpk-portret .doos{width:176px}
.alpk-portret .beeld{display:flex}
.alpk-portret .rood{width:15px;background:#BD1A16}
.alpk-portret img{display:block;width:161px;height:151px;object-fit:cover}
.alpk-portret .bij{font-size:11px;line-height:1.35;text-align:right;padding:6px 0 0}
.alpk-portret .bij b{color:#BE0418}

.alpk-rechts p{font-size:11px;line-height:1.45;margin:0 0 10px}
.alpk-rechts h3{font-family:Georgia,serif;font-size:14px;font-weight:400;color:#BE0418;margin:0 0 7px}

/* ---------- voet ---------- */
.alpk-voet{display:flex}
.alpk-voet .links{width:180px;height:34px;background:#fff}
.alpk-voet .rechts{width:721px;min-height:34px;background:#E8E5E3;color:#573A35;font-size:11px;
  padding:11px 14px;text-align:center;line-height:1.2}
.alpk-voet .rechts a{color:#573A35;text-decoration:none}
.alpk-voet .rechts a:hover{text-decoration:underline}

/* ---------- smal scherm ----------
   Hier wijkt de nabouw bewust af, want het origineel heeft geen mobiele weergave:
   het staat vast op 901 pixels en een telefoon toont dat als een uitgezoomde pagina.
   Alles gaat onder elkaar, de tekst wordt leesbaar groot en elke menuknop is hoog
   genoeg om met een duim te raken. */
@media (max-width:940px){
  .alpk{width:100%}
  /* De tekstkolom mag niet met het scherm meegroeien; bij 900 px werd een regel
     anders bijna twee keer zo lang als het origineel toestaat. */
  .alpk-mid,.alpk-mid.breed{max-width:721px;margin:0 auto}
  .alpk-kop{display:block}
  .alpk-logo{width:100%;height:auto;padding:14px 0}
  .alpk-band{width:100%;height:auto}
  /* Een strook van 721 bij 225 wordt op een telefoon een reepje waarin de klimmer
     half wegvalt. Iets hoger uitsnijden en het beeldpunt naar rechts leggen. */
  .alpk-band img{width:100%;height:auto;aspect-ratio:16/9;object-position:72% 50%}
  .alpk-balken{display:block}
  .alpk-dienst{width:100%;justify-content:flex-end;height:40px}
  .alpk-menu{width:100%;height:auto;flex-wrap:wrap;justify-content:center;padding:4px 10px}
  .alpk-menu a{font-size:15px;padding:11px 10px;line-height:1.2}
  .alpk-menu .streep{display:none}
  /* Het submenu stond eerst op display:none, waardoor een bezoeker op een telefoon
     de rest van de sectie niet meer kon vinden. Het staat nu onder de tekst, vlak
     boven de voet: wel bereikbaar, en de inhoud blijft bovenaan staan. */
  .alpk-lijf{display:flex;flex-direction:column;min-height:0}
  .alpk-mid{order:1}
  .alpk-rechts{order:2}
  .alpk-zij{order:3;display:block;width:100%;background:#F6F4F4;
    border-top:1px solid #e6e2e0;padding:4px 16px 22px}
  .alpk-mid,.alpk-rechts{width:100%;padding:24px 16px}
  .alpk-mid h1,.alpk-mid h2.kop{font-size:26px}
  .alpk-mid p,.alpk-mid li,.alpk-rechts p{font-size:15px;line-height:1.6}
  .alpk-mid h2{font-size:20px}
  .alpk-portret{justify-content:flex-start;margin-top:22px}
  .alpk-portret .bij{font-size:13px;text-align:left}
  .alpk-voet{display:block}
  .alpk-voet .links{display:none}
  .alpk-voet .rechts{width:100%;font-size:13px;line-height:1.7;padding:14px 16px}
}

/* ---------- binnenpagina's ----------
   Op alpinschule-fiss.at zien die er anders uit dan de startpagina: links in de witte
   kolom een submenu, en daarnaast de tekst met rechts een foto. Gemeten op de pagina
   Kletterkurse: submenu op x258, tekst vanaf x453 ongeveer 302 breed, foto 342 breed
   die eindigt op x1131. */
.alpk-mid.breed{width:721px;padding:45px 21px 34px 23px}
.alpk-sub{padding:36px 0 0 8px}
.alpk-sub .titel{font-size:13px;color:#49494A;margin:0 0 8px;letter-spacing:.02em}
.alpk-sub a{display:block;font-size:13px;color:#49494A;text-decoration:none;padding:0 0 3px 14px;line-height:1.35}
.alpk-sub a::before{content:"> ";margin-left:-14px}
.alpk-sub a:hover{color:#B51E2F}
.alpk-sub a.hier{color:#B51E2F}

.alpk-tweeluik{display:flex;gap:33px;align-items:flex-start}
.alpk-tweeluik .tekst{width:302px;flex:0 0 302px}
.alpk-tweeluik .beeld{width:342px;flex:0 0 342px}
.alpk-tweeluik .beeld img{display:block;width:342px;height:255px;object-fit:cover}
.alpk-tweeluik .beeld .bij{font-size:11px;color:#49494A;padding:5px 0 0}

/* een kleine feitenlijst, zoals het origineel die onder de tekst zet */
.alpk-feiten{margin:14px 0 0;border-top:1px solid #e6e2e0}
.alpk-feiten div{display:flex;gap:10px;border-bottom:1px solid #e6e2e0;padding:4px 0}
.alpk-feiten dt,.alpk-feiten .naam{flex:0 0 96px;font-weight:700;font-size:11px;color:#49494A}
.alpk-feiten dd,.alpk-feiten .waarde{margin:0;font-size:11px;color:#49494A;line-height:1.4}

@media (max-width:940px){
  .alpk-mid.breed{width:100%;padding:24px 16px}
  .alpk-sub{padding:18px 0 0}
  .alpk-sub .titel{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#8a8384}
  .alpk-sub a{display:inline-block;font-size:15px;padding:9px 0 9px 14px;margin-right:18px}
  /* De foto van 342 px werd op een tablet tot 900 px opgeblazen en dus wazig.
     684 is de grootste versie die er echt is. */
  .alpk-tweeluik .beeld{max-width:684px}
  .alpk-tweeluik{display:block}
  .alpk-tweeluik .tekst,.alpk-tweeluik .beeld{width:100%;flex:none}
  .alpk-tweeluik .beeld{margin:20px 0 0}
  .alpk-tweeluik .beeld img{width:100%;height:auto;aspect-ratio:342/255}
  .alpk-tweeluik .beeld .bij{font-size:13px}
  .alpk-feiten dt,.alpk-feiten .naam,.alpk-feiten dd,.alpk-feiten .waarde{font-size:14px}
  .alpk-feiten dt,.alpk-feiten .naam{flex-basis:118px}
}

/* ---------- aanvraagformulier ----------
   Zelfde maatvoering als de rest: label links, veld rechts, alles binnen de tekstkolom. */
.alpk-form{margin:16px 0 0}
.alpk-form .v{display:flex;align-items:center;gap:4px;margin:0 0 10px}
.alpk-form .v.boven{display:block}
.alpk-form label{flex:0 0 96px;font-size:11px;color:#49494A;margin:0}
.alpk-form .v.boven label{display:block;margin:0 0 4px}
.alpk-form input,.alpk-form select,.alpk-form textarea{width:200px;box-sizing:border-box;
  font-family:inherit;font-size:11px;color:#000;background:#fff;border:1px solid #ccc;
  border-radius:3px;padding:4px 6px;margin:0}
.alpk-form .v.boven textarea{width:100%;min-height:74px}
.alpk-form .knop{margin:14px 0 0}
.alpk-form button{font-family:inherit;font-size:11px;color:#fff;background:#BD1A16;border:0;
  border-radius:3px;padding:6px 14px;cursor:pointer}
.alpk-form button:hover{background:#9d1512}
.alpk-ok{margin:12px 0 0;padding:9px 11px;background:#efece9;border-radius:3px;font-size:11px}

@media (max-width:940px){
  .alpk-form .v{display:block;margin-bottom:14px}
  .alpk-form label{display:block;margin:0 0 5px;font-size:15px}
  .alpk-form input,.alpk-form select,.alpk-form textarea{width:100%;min-height:44px;font-size:16px}
  .alpk-form .v.boven textarea{min-height:110px}
  .alpk-form button{width:100%;min-height:48px;font-size:16px}
  .alpk-ok{font-size:15px}
}