/* latin-ext */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: url(mulilatinext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: url(mulilatin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* { border-spacing:0; margin:0;padding:0; font-family:'Muli',sans-serif;font-size: 14px;font-weight: normal; color:#00a;cursor:url(../i/cursor.png),auto;text-align: left;}
#nav,h1,h2,h3,h4,h5,h6,strong {font-family: 'Muli',sans-serif !important;}
p,h2,h3,h4,h5,h6{margin-left:8px !important; margin-right: 8px !important;}
#page,#footer{width:100%;}
#page{z-index: 10;margin-top:100px;}
b,strong { font-weight: bold; }
html{background:#e6e6e6 url(../i/rm.png) no-repeat -150px -100px fixed;}

body { background:#fff;}

div#logo:hover img,div#logo_r:hover img{
  transform: rotateY(360deg); transform-style: preserve-3d;
}
div#logo,div#logo_r {float:left;padding:10px 5px;}
div#logo_r{float:right;}
div#logo img, div#logo_r img{
transition: all 7s ease;
}

h1,h2,h3 { margin:8px 0;color:#00c;letter-spacing:1px; }
/*h1{font-weight: bold;font-size:25px !important;text-shadow: 1px 1px 0 #000;background:linear-gradient(to right, #b93,#fe6,#fe6, #b93 );display:inline-block; padding:5px;border-radius:5px;box-shadow:3px 3px 3px #444,inset 3px 3px 3px gold, inset -3px -3px 3px goldenrod;margin:1em 0;}
*/
h1{font-weight:bold; font-size:22px !important; text-shadow: 1px 1px 1px #000; margin:1em 8px;padding-top:1em; }
h2{ font-size:16px;margin:4px 0; text-shadow: 1px 1px 0 #000;}
h3 { font-size:16px;padding:5px 0 3px 0;}
ol,ul { padding-left:3em; }
hr { height:0;border:0px solid #fff; border-width: 1px 0 0 0; }
a, a:hover { text-decoration:none;color:#ccc;font-weight:bold; }
a:hover { color:#000; }

#rm{display:block;position:fixed;z-index:-1;right:0;bottom:0;width:400px;height:400px;background:url(../i/rm.png) no-repeat top left;}
#page a{color:#00a;}

#nav {background-color: #00c;background: linear-gradient(to bottom,#00c,#005); position:fixed; z-index:100;display:block;top:0;height:100px; text-align:right;}
#nav a{display:block;padding: 6px 10px;}
#nav .l1, #nav .l2 {display:inline-block; color:#ccc;margin-top:68px;}
#nav .l1:hover,#nav .l2:hover,#footer a:hover,#page a:hover {background:linear-gradient(to right, #b93,#fe6,#fe6, #b93 );border-radius:5px;box-shadow: inset 2px 2px 2px gold, inset -2px -2px 2px goldenrod;}
#nav .l1:hover >a,#nav .l2:hover a {color:#00c;}
#nav .l1 .b2 {display:none;position:absolute;background:linear-gradient(to bottom,#005,#00c); padding:0px;text-align:left;margin-left:0px;box-shadow: 1px 1px 4px #000;}
#nav .l2{display:block;margin:0;}
#nav .l1:hover .b2, #nav .l1:focus-within .b2 {display:block;z-index:101;}
/* Tastatur: sichtbarer Fokus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #fe6;outline-offset:2px;}
#page a:focus-visible,#footer a:focus-visible{outline-color:#00c;}

.bg{width:100%;min-height:980px;display:flow-root; background-position: 0% 0%; background-repeat: no-repeat;z-index:9}
.text{background:rgba(255,255,255,0.85); float:right; z-index: 10;width:45% !important;min-height:980px;box-sizing:border-box;padding:0 1em 1em;}

.text h1{margin:1em 0;padding:0.3em 0.5em;}
.text p{font-size:16px;}
.text .s,.s{font-size:12px;}
.text .s strong, .s strong{font-size:14px;}
#footer{display: block;background:linear-gradient(to right,#b93,#fe6,#fe6, #b93,#fe6,#fe6, #b93);width:100%;clear:both;float:left;z-index: 10;}
#footer a{ color:#00c;display:inline-block;padding:3px;margin:0}
#footer a:hover{color:#ccc;background:#00a;box-shadow:none;border-radius:3px;}
#footer p, #footer a{font-size: 12px;}
#footer img{height:24px;width:auto;}
/* Schrift des Inhalts auf allen Geräten (die globale *-Regel setzt sonst 14px auf jedes Element) */
#page p,#page li,#page td,#page p *,#page li *,#page td *{font-size:16px;line-height:1.5;}
#page .s,#page .s *{font-size:14px;}
#page .s strong{font-size:15px;}
#footer p a{font-size:14px;}
#footer div{float: left; margin:10px; width:30%;}
.clear{clear: both;}
.em2{margin:1em 0 2em;background:linear-gradient(to bottom, #fff,rgba(0,0,170,0.5),#fff);height: 5px;}
/* Hintergründe (Kopfleiste, Seite, Footer) über die ganze Fensterbreite, Inhalt max. 980px zentriert */
:root{--content-w:980px;}
body{width:100%;min-height:100vh;display:flex;flex-direction:column;}
#page{max-width:var(--content-w);margin-left:auto;margin-right:auto;flex:1 0 auto;}
#footer{flex:0 0 auto;}
/* Scrollseiten: jeder Unterpunkt ist ein Abschnitt, Sprungziel liegt unter der fixierten Kopfleiste */
html{scroll-behavior:smooth;}
.section{display:flow-root;scroll-margin-top:100px;}
.section + .section{border-top:5px solid transparent;border-image:linear-gradient(to right,#fff,rgba(0,0,170,0.5),#fff) 1;}
/* Desktop: Abstand zwischen den Abschnitten, damit Fotos nicht direkt aneinanderstoßen */
@media screen and (min-width: 1000px) {
  .section + .section{margin-top:40px;padding-top:40px;}
}
#nav .l2 a.current{color:#fe6;}
/* Sprachumschaltung: Flagge + Kürzel, aktive Sprache gold. Desktop oben rechts über der Menüzeile, links neben dem Emblem */
#nav .langsw{position:absolute;top:14px;right:calc(max(0px, (100% - var(--content-w)) / 2) + 100px);margin:0;padding:0;color:#ccc;font-weight:bold;white-space:nowrap;}
#nav .langsw a,#nav .langsw .active,#nav .langmob a,#nav .langmob .active{display:inline-block;padding:0 4px;color:#ccc;font-weight:bold;}
#nav .langsw .active,#nav .langmob .active{color:#fe6;border-bottom:2px solid #fe6;padding-bottom:3px;}
#nav .langsw a:hover,#nav .langmob a:hover{color:#fff;}
#nav .langsw img,#nav .langmob img{vertical-align:-1px;margin-right:5px;box-shadow:1px 1px 2px #000;}
#nav .langsw .sep,#nav .langmob .sep{color:#88a;padding:0 2px;}
#nav .langmob{display:none;}
/* Nach-oben-Button (erscheint nach einer Bildschirmhöhe) */
#totop{position:fixed;right:20px;bottom:20px;z-index:200;width:48px;height:48px;padding:0;border:2px solid #b93;border-radius:50%;background:linear-gradient(to bottom,#00c,#005);box-shadow:2px 2px 4px rgba(0,0,0,0.4);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
#totop.show{opacity:1;visibility:visible;}
#totop:before{content:"";display:block;width:14px;height:14px;margin:6px auto 0;border-left:3px solid #fe6;border-top:3px solid #fe6;transform:rotate(45deg);}
#totop:hover{background:linear-gradient(to right,#b93,#fe6,#fe6,#b93);}
#totop:hover:before{border-color:#00c;}
@media print{#totop{display:none;}}
#page img.intro{display:block;width:100%;height:auto;margin:0 auto !important;float:none;}
#page > .section:first-child > h1:first-child{margin-top:0;}
#nav,#footer{box-sizing:border-box;width:100%;left:0;padding-left:max(0px,calc((100% - var(--content-w)) / 2));padding-right:max(0px,calc((100% - var(--content-w)) / 2));}
img{max-width:100%;height:auto;}
#navtoggle,#nav .subtoggle{display:none;}

@media screen and (min-width: 1000px) and (max-height: 700px) {
  #nav{position: absolute;}
}

/* Responsive: Tablet und Smartphone */
@media screen and (max-width: 999px) {
  html{background-position:-100px -60px;background-size:350px auto;}
  body{overflow-x:hidden;}

  /* Navigation: Leiste oben, Menü per Hamburger-Button */
  #nav{position:sticky;top:0;height:auto;min-height:60px;text-align:left;}
  #nav.open{max-height:100vh;overflow-y:auto;}
  div#logo{float:none;padding:10px 60px 10px 10px;}
  div#logo img{height:40px;width:auto;}
  div#logo_r{display:none;}
  #navtoggle{display:block;position:absolute;top:10px;right:10px;width:44px;height:40px;border:1px solid #ccc;border-radius:5px;background:transparent;cursor:pointer;}
  #navtoggle span,#navtoggle span:before,#navtoggle span:after{display:block;position:absolute;left:10px;width:22px;height:2px;background:#ccc;content:"";}
  #navtoggle span{top:19px;}
  #navtoggle span:before{top:-7px;left:0;}
  #navtoggle span:after{top:7px;left:0;}
  #nav.open #navtoggle{border-color:gold;}
  #nav .l1{display:none;position:relative;margin:0;border-top:1px solid rgba(255,255,255,0.15);}
  #nav.open .l1{display:block;}
  #nav .l1 > a{padding:12px 60px 12px 15px;font-size:16px;}
  #nav .l1:hover,#nav .l2:hover{background:none;box-shadow:none;border-radius:0;}
  #nav .l1:hover > a{color:#ccc;}
  #nav .l1 a:hover,#nav .l1 a.selected{color:#fe6;}
  #nav .subtoggle{display:block;position:absolute;top:0;right:0;width:54px;height:44px;border:0;border-left:1px solid rgba(255,255,255,0.15);background:transparent;color:#ccc;font-size:22px;cursor:pointer;}
  #nav .subtoggle:before{content:"+";color:#ccc;font-size:22px;}
  #nav .l1.open .subtoggle:before{content:"\2013";}
  #nav .l1 .b2,#nav .l1:hover .b2,#nav .l1:focus-within .b2{display:none;position:static;box-shadow:none;background:rgba(0,0,0,0.25);}
  #nav .l1.open .b2{display:block;}
  #nav .l2 a{padding:10px 15px 10px 30px;}


  #page{margin-top:0;}
  .section{scroll-margin-top:80px;}
  h1{font-size:20px !important;padding-top:0.5em;}

  /* Seiten mit Hintergrundbild und Textbox */
  .bg{height:auto !important;min-height:0;padding-top:min(100vw,70vh);background-size:auto min(100vw,70vh);background-position:50% 0 !important;}
  .text{float:none;width:auto !important;height:auto;min-height:0;background:#fff;}

  /* Fotos und Grafiken mittig */
  #page img{float:none;display:block;margin:1em auto;}
  #page table{display:block;overflow-x:auto;}

  #footer div{float:none;width:auto;}
  /* Farbverlauf in Desktop-Proportionen statt auf die schmale Breite gestaucht */
  #footer{background-size:1000px 100%;background-position:center;}
  #rm{width:150px;height:150px;background-size:contain;}
}

@media screen and (max-width: 999px) {
  /* Handy und Tablet: 15px Rand links und rechts (Inhalt, Header, Footer) */
  /* kleiner Abstand zwischen den Abschnitten (Desktop: 40px) */
  .section + .section{margin-top:20px;padding-top:20px;}
  p,h1,h2,h3,h4,h5,h6{margin-left:15px !important;margin-right:15px !important;}
  ul,ol{margin-left:15px;margin-right:15px;padding-left:1.5em;}
  div#logo{padding-left:5px;}
  #navtoggle{right:15px;}
  #nav .l1 > a{padding-left:15px;}
  /* Sprachumschaltung in der Kopfleiste links neben dem Menü-Button, ausgeschrieben am Ende des aufgeklappten Menüs */
  #nav .langsw{position:absolute;top:21px;right:71px;margin:0;padding:0;}
  #nav.open .langmob{display:block;padding:12px 15px 16px;border-top:1px solid rgba(255,255,255,0.15);font-size:16px;}
  #nav .langmob a,#nav .langmob .active{padding:4px 0;}
  #nav .langmob .sep{padding:0 12px;}
  #totop{right:15px;bottom:calc(15px + env(safe-area-inset-bottom, 0px));}
  #nav .l2 a{padding-left:30px;}
  #footer div{margin:10px 0;padding:0 15px;}
  #footer h2,#footer p{margin-left:0 !important;margin-right:0 !important;}
  #page .contactform,#page .formmsg{margin-left:15px;margin-right:15px;}
  #page .contactform button{width:100%;}
  #footer a{padding-left:0;padding-right:0;}
  #footer a img{margin-right:6px;}
  .text{padding:0;}
  .text h1{padding-left:0;padding-right:0;}
}

@media screen and (max-width: 600px) {
  /* Handy: Blocksatz mit Silbentrennung */
  p,td,li{text-align:justify;-webkit-hyphens:auto;hyphens:auto;}
  #page .contactform label{font-size:16px;}
  #page .contactform p.hint,#page .contactform p.hint *{font-size:14px;}
  /* Footer: nur die Links größer */
  #footer p a{font-size:15px;padding-top:4px;padding-bottom:4px;}
}
/*@media screen and (max-width: 500px) {
  body,#nav{ width:500px; }
}
@media screen and (min-width:500px){
  body,#nav{ width:100%; }
}
@media screen and (min-width: 1000px) {
  body,#nav { margin-left:auto;margin-right:auto;width:980px; }
}
*/
@media print{
    body{width:100%;}
}
p,td,li { font-family:'Muli',sans-serif;text-align:justify;padding: 5px 0; }
ul.left li{text-align:left;}
td { padding:5px;  }
.left {text-align:left;}
.right { text-align:right; }
img.right{float:right; margin:1em;}
.center { text-align:center; }
q:before { content:""; }
q:after { content: "@ricarda-hofmann.com"; }
a.red{color:#f00 !important;}
/* Spam-Fangfeld im Kontaktformular: für Menschen unsichtbar */
#page form .hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* Kontaktformular */
.contactform{max-width:560px;margin:1.5em 8px 2em;}
.contactform .field{margin:0 0 18px;}
.contactform label{display:block;margin:0 0 6px;font-size:15px;font-weight:bold;color:#00a;}
.contactform .req{color:#c00;font-weight:bold;}
.contactform input[type=text],.contactform input[type=email],.contactform textarea{display:block;width:100%;box-sizing:border-box;padding:11px 12px;font-size:16px;line-height:1.4;color:#00a;background:#fff;border:1px solid #aab;border-radius:6px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);cursor:text;transition:border-color .2s,box-shadow .2s;}
.contactform textarea{min-height:170px;resize:vertical;}
.contactform input:hover,.contactform textarea:hover{border-color:#77a;}
.contactform input:focus,.contactform textarea:focus{outline:none;border-color:#00c;box-shadow:0 0 0 3px rgba(0,0,204,0.18);}
.contactform input:user-invalid,.contactform textarea:user-invalid{border-color:#c00;}
.contactform p.hint{margin:0 0 8px !important;font-size:13px;color:#446;text-align:left;}
.contactform button{margin-top:10px;padding:12px 32px;font-size:16px;font-weight:bold;color:#00a;background:linear-gradient(to right,#b93,#fe6,#fe6,#b93);border:1px solid #b93;border-radius:6px;box-shadow:inset 2px 2px 2px gold,inset -2px -2px 2px goldenrod,0 2px 4px rgba(0,0,0,0.2);cursor:pointer;}
.contactform button:hover{color:#fe6;background:linear-gradient(to bottom,#00c,#005);border-color:#005;box-shadow:0 2px 4px rgba(0,0,0,0.3);}
.contactform button:focus-visible{outline:2px solid #00c;outline-offset:3px;}
/* Rückmeldung nach dem Absenden */
.formmsg{max-width:560px;margin:1.5em 8px 2em;padding:14px 18px;border-left:5px solid;border-radius:6px;}
.formmsg.ok{background:#f1f7ec;border-color:#5a3;}
.formmsg.err{background:#fdf0f0;border-color:#c00;}
.formmsg h2,.formmsg p{margin-left:0 !important;margin-right:0 !important;}